.loves-result,.couple-result{
  font-family: SourceHanSerifCN-Regular;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100vh;
  background-size: 100% 100%;
  background-image: url("./../img/lovesbg.jpg");
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
  color: #a50319;
  .btm{
    position: absolute;
    width: 7.91rem;
    height: 1.5rem;
    bottom: .5rem;
    left: 50%;
    margin-left: -3.9505rem;
    background-size: 100% 100%;
    background-image: url("./../img/lovesbtm.png");
    a{
      position: absolute;
      transform: scale(.4);
      font-size: .5rem;
      width: 10rem;
      bottom: -.2rem;
      color: #000;
      &.a1{
        left: -3rem;
      }
      &.a2{
        right: -5.6rem;
      }
    }
    img{
      position: absolute;
      &.qr2{
        width: .6rem;
        height: .6rem;
        right: .45rem;
        top: .3rem;
      }
      &.qr1{
        width: .6rem;
        height: .6rem;
        left: 0.4rem;
        top: .3rem;
      }
      &.logo{
        width: 1.84rem;
        height: .74rem;
        left: 2.15rem;
        top: .22rem;
      }
      &.mzlogo{
        width: .97rem;
        height: 1.13rem;
        left: 4.77rem;
        top: 0;
      }
    }
  }
  .download{
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    width: 3rem;
    height: 1.19rem;
    text-align: center;
    background-size: 100% 100%;
    line-height: 1.1rem;
    color: #fff;
    background-image: url("./../img/btnbg.png");
  }
  .left-result,.right-result{
    width: 48%;
    height: 100%;
    position: relative;
    .des-box{
      position: absolute;
      top: 2.3rem;
      right: 0;
      bottom: 3rem;
      left: 0;
      overflow: auto;
      .f-info{
        margin-bottom: .3rem;
        &:last-child{
          margin-bottom: 0;
        }
        .content{
          font-size: 12px;
          line-height: 1.2;
          margin-top: .2rem;
          padding-left: .9rem;
          color: #000;
          p{
            margin: 0;
            text-indent: 2em;
          }
        }
        .tit{
          font-size: .8rem;
          color: #a50319;
          display: flex;
          align-items: center;
          width: 100%;
          i{
            width: .8rem;
            height: .8rem;
            background-size: 100% 100%;
            background-image: url("./../img/icon1.png");
            margin-right: .1rem;
          }
        }
      }
    }
    .name{
      font-size: .5rem;
      line-height: 1;
      position: absolute;
      top: 1rem;
      right: 0;
    }
    .f-name{
      position: absolute;
      width: 1.5rem;
      height: 1.5rem;
      text-align: center;
      line-height: 1.4rem;
      background-size: 100% 100%;
      background-image: url("./../img/wordbg2.png");
      font-size: 1rem;
      top: .4rem;
      left: 0;
    }
  }
  .right-result{
    .name{
      right: inherit;
      left: 0;
    }
    .f-name{
      right: 0;
      left: inherit;
    }
  }
  @media screen and (orientation: landscape){
    height: 120vh;
    .btm{
      transform: scale(.4);
      bottom: -.4rem;
    }
    .download{
      position: fixed;
      right: .2rem;
      bottom: .2rem;
      width: 1.2rem;
      height: .5rem;
      line-height: .5rem;
    }
    .left-result,.right-result{
      .des-box{
        position: absolute;
        top: 1.3rem;
        right: 0;
        bottom: 1rem;
        left: 0;
        overflow: auto;
        .f-info{
          margin-bottom: .1rem;
          &:last-child{
            margin-bottom: 0;
          }
          .content{
            font-size: 12px;
            line-height: 1.2;
            margin-top: .2rem;
            padding-left: .9rem;
            color: #000;
            p{
              margin: 0;
              text-indent: 2em;
            }
          }
          .tit{
            font-size: .4rem;
            color: #a50319;
            display: flex;
            align-items: center;
            width: 100%;
            i{
              width: .8rem;
              height: .8rem;
              background-size: 100% 100%;
              background-image: url("./../img/icon1.png");
              margin-right: .1rem;
            }
          }
        }
      }
      .name{
        font-size: .3rem;
        line-height: 1;
        position: absolute;
        top: .2rem;
        right: 0;
      }
      .f-name{
        position: absolute;
        width: 1rem;
        height: 1rem;
        text-align: center;
        line-height: 1rem;
        font-size: .8rem;
        top: .2rem;
        left: 0;
      }
    }
    .right-result{
      .name{
        right: inherit;
        left: 0;
      }
      .f-name{
        right: 0;
        left: inherit;
      }
    }
  }
}
.couple-result{
  background-image: url("./../img/cpbg.jpg");
  color: #fff;
  padding: 0 .6rem;
  .heart-box{
    position: absolute;
    width: 6.4rem;
    height: 5.88rem;
    top: 0;
    left: 50%;
    margin-left: -3.2rem;
    background-size: 100% 100%;
    background-image: url("./../img/cp.png");
    color: #7f4f21;
    font-size: 12px;
    line-height: 1;
    .date{
      position: absolute;
      width: 1.7rem;
      height: .8rem;
      bottom: .4rem;
      left: 2.2rem;
      font-size: .4rem;
      transform: rotate(90deg);
      p{
        position: absolute;
        transform: scale(.5) translate(-50%,-50%);
        top: 0;
        left: 0;
        width: 200%;
        height: 50%;
        word-break: break-all;
        &:last-child{
          top: 40%;
        }
      }
    }
    .name1{
      position: absolute;
      width: .88rem;
      height: 1.7rem;
      top: 1.5rem;
      left: 1.26rem;
      text-align: center;
      font-size: .5rem;
    }
    .name2{
      position: absolute;
      width: .88rem;
      height: 1.7rem;
      top: 1.5rem;
      right: 1.26rem;
      text-align: center;
      font-size: .5rem;
    }
  }
  .right-result{
    .des-box{
      .f-info{
        .tit{
          justify-content: flex-end;
          i{
            margin-left: .2rem;
            margin-right: 0;
          }
        }
      }
    }
  }
  .left-result,.right-result{
    width: 37%;
    height: 100%;
    position: relative;
    .des-box{
      .f-info{
        margin-bottom: .3rem;
        &:last-child{
          margin-bottom: 0;
        }
        .content{
          color: #fff;
        }
        .tit{
          font-size: .8rem;
          color: #fab45a;
        }
      }
    }
    .f-name{
      background-image: url("./../img/wordbg3.png");
      color: #fab45a;
    }
  }
  .btm{
    width: 6.79rem;
    margin-left: -3.395rem;
    background-image: url("./../img/lovesbtm2.png");
    a{
      color: #f2b059;
      bottom: -.23rem;
      &.a1{
        left: -3.12rem;
      }
      &.a2{
        right: -5.73rem;
      }
    }
    img{
      &.logo{
        width: 1.62rem;
        height: .65rem;
        left: 1.83rem;
        top: .4rem;
      }
      &.mzlogo{
        width: .85rem;
        height: .99rem;
        left: 4rem;
        top: .22rem;
      }
      &.qr2{
        transform: rotate(45deg) scale(.8);
        right: .23rem;
        top: .43rem;
      }
      &.qr1{
        transform: rotate(45deg) scale(.8);
        left: 0.28rem;
        top: .43rem;
      }
    }
  }
}
.page-main{
  width: 100%;
  height: 100vh;
  position: relative;
  font-family: SourceHanSerifCN-Regular;
  canvas{
    position: absolute;
    z-index: 99;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  @media screen and (orientation: landscape){
    height: 170vh;
  }
  &.tips-main{
    background-size: cover;
    background-image: url("./../img/tipsbg.jpg");
    .top{
      width: 100%;
      height: auto;
      margin: 0 auto;
      img{
        display: block;
        width: 100%;
        height: auto;
      }
    }
    .logo{
      position: absolute;
      width: 9.32rem;
      height: 2.47rem;
      background-size: 100% 100%;
      background-image: url("./../img/logo.png");
      bottom: 2rem;
      left: 50%;
      margin-left: -4.66rem;
    }
    .main-box{
      position: absolute;
      top: 5.37rem;
      bottom: 0;
      width: 100%;
      left: 0;
      padding: 1.9rem 2.6rem;
      .tit{
        font-size: .9rem;
        color: #a50319;
        text-align: center;
        line-height: 1.2;
      }
      .content{
        margin-top: 1rem;
        font-size: .45rem;
        line-height: 1.3;
      }
      .agree{
        display: block;
        width: 5.41rem;
        height: 1.19rem;
        text-align: center;
        margin: 1.6rem auto;
        background-size: 100% 100%;
        line-height: 1.19rem;
        color: #fff;
        background-image: url("./../img/btnbg.png");
      }
    }
    @media screen and (orientation: landscape){
      .top{
        max-width: 400px;
      }
      .logo{
        position: absolute;
        width: 1.89rem;
        height: .5rem;
        bottom: .2rem;
        margin-left: -.945rem;
      }
      .main-box{
        position: absolute;
        top: 3rem;
        padding: .3rem 1rem;
        .tit{
          font-size: .34rem;
          color: #a50319;
          text-align: center;
          line-height: 1.2;
        }
        .content{
          margin-top: .2rem;
          font-size: .2rem;
          line-height: 1.3;
        }
        .agree{
          display: block;
          width: 2.7rem;
          height: .6rem;
          text-align: center;
          margin: .3rem auto;
          margin-bottom: 0;
          font-size: .2rem;
          background-size: 100% 100%;
          line-height: .6rem;
          color: #fff;
          background-image: url("./../img/btnbg.png");
        }
      }
    }
  }
  &.single-result{
    background-size: cover;
    background-image: url("./../img/singleresultbg.jpg");
    a.download{
      position: absolute;
      right: 1rem;
      bottom: 3rem;
      width: 3rem;
      height: 1.19rem;
      text-align: center;
      background-size: 100% 100%;
      line-height: 1.1rem;
      color: #fff;
      background-image: url("./../img/btnbg.png");
    }
    .name{
      font-size: .8rem;
      line-height: 1;
      position: absolute;
      top: 1rem;
      right: 1.5rem;
    }
    .f-name{
      position: absolute;
      width: 3.1rem;
      height: 3.1rem;
      text-align: center;
      line-height: 3.1rem;
      background-size: 100% 100%;
      background-image: url("./../img/wordbg.png");
      font-size: 2.2rem;
      top: 2rem;
      left: 1.8rem;
    }
    .btm{
      position: absolute;
      width: 8.5rem;
      height: 2.34rem;
      bottom: .5rem;
      left: 50%;
      margin-left: -4.25rem;
      a{
        position: absolute;
        bottom: 0;
        transform: scale(.5);
        font-size: .6rem;
        width: 10rem;
        left: -.2rem;
        text-align: center;
        color: #000;
      }
      img{
        position: absolute;
        width: 1.58rem;
        height: 1.58rem;
        bottom: .75rem;
        left: 4rem;
        &.logo{
          width: 2.97rem;
          height: 1.17rem;
          bottom: .83rem;
          left: 0;
        }
        &.mzlogo{
          width: 1.55rem;
          height: 1.83rem;
          bottom: .5rem;
          left: initial;
          right: 0;
        }
      }
    }
    .des-box{
      position: absolute;
      top: 5.5rem;
      left: 3rem;
      right: 1rem;
      bottom: 3.5rem;
      overflow-y: auto;
      .f-info{
        margin-bottom: .8rem;
        &:last-child{
          margin-bottom: 0;
        }
        .content{
          font-size: 12px;
          line-height: 1.3;
          margin-top: .3rem;
          padding-left: 1.4rem;
          p{
            margin: 0;
            text-indent: 2em;
          }
        }
        .tit{
          font-size: .9rem;
          color: #a50319;
          display: flex;
          align-items: center;
          width: 100%;
          i{
            width: 1.2rem;
            height: 1.2rem;
            background-size: 100% 100%;
            background-image: url("./../img/icon1.png");
            margin-right: .2rem;
          }
        }
      }
    }
    @media screen and (orientation: landscape){
      height: 120vh;
      a.download{
        position: fixed;
        right: .2rem;
        bottom: .3rem;
        width: 1.5rem;
        height: .5rem;
        line-height: .5rem;
      }
      .name{
        font-size: .5rem;
        line-height: 1;
        position: absolute;
        top: .2rem;
        right: .5rem;
      }
      .f-name{
        display: flex;
        align-items: center;
        width: 1.4rem;
        justify-content: center;
        height: 1.4rem;
        text-align: center;
        line-height: 1.4rem;
        font-size: 1.2rem;
        top: .7rem;
        left: .9rem;
      }
      .btm{
        transform: scale(.5);
      }
      .des-box{
        position: absolute;
        top: 2.3rem;
        left: 1rem;
        right: 1rem;
        bottom: 1.5rem;
        overflow-y: auto;
        .f-info{
          margin-bottom: .3rem;
          &:last-child{
            margin-bottom: 0;
          }
          .content{
            font-size: 12px;
            line-height: 1.3;
            margin-top: .3rem;
            padding-left: .7rem;
            p{
              margin: 0;
              text-indent: 2em;
            }
          }
          .tit{
            font-size: .4rem;
            color: #a50319;
            display: flex;
            align-items: center;
            width: 100%;
            i{
              width: .6rem;
              height: .6rem;
              margin-right: .1rem;
            }
          }
        }
      }
    }
  }
  &.single,&.loves,&.couple{
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-image: url("./../img/tipsbg.jpg");
    .btm{
      position: absolute;
      width: 100%;
      height: 3.47rem;
      left: 0;
      bottom: 2rem;
      .tit{
        text-align: center;
        line-height: 1;
        margin-top: .6rem;
        color: #a50319;
        font-size: .65rem;
      }
      .logo{
        width: 9.32rem;
        height: 2.47rem;
        background-size: 100% 100%;
        background-image: url("./../img/logo.png");
        margin: 0 auto;
      }
    }
    .single-main,.loves-main{
      position: absolute;
      width: 100%;
      left: 0;
      top: 50%;
      height: 15.5rem;
      margin-top: -11rem;
      .text{
        font-size: .57rem;
        text-align: center;
        line-height: 1;
        margin: .4rem 0 .6rem 0;
      }
      a.search{
        margin: 0 auto;
        display: block;
        width: 5.41rem;
        height: 1.19rem;
        text-align: center;
        background-size: 100% 100%;
        line-height: 1.1rem;
        color: #fff;
        background-image: url("./../img/btnbg.png");
      }
      .form-box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 3.2rem 0;
        flex-direction: column;
        width: 9.72rem;
        height: 11.7rem;
        margin: 0 auto;
        margin-bottom: 1rem;
        background-size: 100% 100%;
        background-image: url("./../img/homebd.png");
        .ipt{
          display: flex;
          flex-direction: column;
          align-items: center;
          span{
            line-height: 1.5;
          }
          input{
            width: 4rem;
            height: 1.2rem;
            background: #fff;
            border: thin solid #7b7d86;
            line-height: 1.15rem;
            font-size: 12px;
            text-align: center;
          }
        }
      }
    }
    @media screen and (orientation: landscape){
      .btm{
        position: absolute;
        width: 100%;
        height: 1.7rem;
        left: 0;
        bottom: .1rem;
        .tit{
          text-align: center;
          line-height: 1;
          margin-top: .2rem;
          color: #a50319;
          font-size: .35rem;
        }
        .logo{
          width: 3.77rem;
          height: 1rem;
          background-size: 100% 100%;
          background-image: url("./../img/logo.png");
          margin: 0 auto;
        }
      }
      .single-main,.loves-main{
        position: absolute;
        width: 100%;
        left: 0;
        top: 5%;
        height: 90%;
        margin-top: 0;
        .text{
          font-size: .2rem;
          text-align: center;
          line-height: 1;
          margin: .1rem 0 .2rem 0;
        }
        a.search{
          margin: 0 auto;
          display: block;
          width: 3rem;
          height: .4rem;
          text-align: center;
          background-size: 100% 100%;
          line-height: .4rem;
          color: #fff;
          background-image: url("./../img/btnbg.png");
        }
        .form-box{
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: .8rem 0;
          flex-direction: column;
          width: 4.45rem;
          height: 3.4rem;
          margin: 0 auto;
          margin-bottom: .2rem;
          background-size: 100% 100%;
          background-image: url("./../img/homebd.png");
          .ipt{
            display: flex;
            flex-direction: row;
            align-items: center;
            span{
              line-height: 1.5;
              width: .6rem;
              flex-shrink: 0;
            }
            input{
              width: auto;
              flex-grow: 1;
              height: .5rem;
              background: #fff;
              border: thin solid #7b7d86;
              line-height: .5rem;
              font-size: 12px;
              text-align: center;
            }
          }
        }
      }
    }
  }
  &.loves{
    .loves-main{
      height: 16.5rem;
      margin-top: -13rem;
      .form-box{
        height: 16.45rem;
        background-size: 100% 100%;
        background-image: url("./../img/homebd.png");
        padding: 2.2rem 0;
        .line{
          height: 1px;
          width: 80%;
          margin: .3rem 0;
          background: #a50319;
        }
      }
    }
    @media screen and (orientation: landscape){
      .loves-main{
        height: 90%;
        margin-top: 0;
        .form-box{
          height: 4rem;
          background-size: 100% 100%;
          background-image: url("./../img/homebd.png");
          padding: .4rem 0;
          .line{
            height: 1px;
            width: 80%;
            margin: .1rem 0;
            background: #a50319;
          }
          .ipt{
            span{
              line-height: 1.5;
              width: 1rem;
              flex-shrink: 0;
            }
            input{
              max-width: 2rem;
            }
          }
        }
      }
    }
  }
  &.couple{
    .loves-main{
      height: 16.5rem;
      margin-top: -13rem;
      .form-box{
        height: 16.45rem;
        background-size: 100% 100%;
        background-image: url("./../img/homebd.png");
        padding: 1rem 0;
        .line{
          height: 1px;
          width: 80%;
          margin: .3rem 0;
          background: #a50319;
        }
      }
    }
    @media screen and (orientation: landscape){
      .loves-main{
        height: 90%;
        margin-top: 0;
        .form-box{
          height: 5rem;
          width: 6rem;
          background-size: 100% 100%;
          background-image: url("./../img/homebd.png");
          padding: .3rem 0;
          .line{
            height: 1px;
            width: 80%;
            margin: .05rem 0;
            background: #a50319;
          }
          .ipt{
            width: 90%;
            margin: 0 auto;
            justify-content: center;
            span{
              line-height: 1.5;
              width: 1rem;
              flex-shrink: 0;
            }
            input{
              max-width: 3rem;
            }
          }
        }
      }
    }
  }
  &.home{
    background-size: cover;
    background-image: url("./../img/homebg.jpg");
    .home-main{
      position: absolute;
      width: 100%;
      height: 16.5rem;
      top: 50%;
      margin-top: -9rem;
      left: 0;
      .logo{
        margin: 0 auto;
        width: 9.32rem;
        height: 2.47rem;
        background-size: 100% 100%;
        background-image: url("./../img/logo.png");
      }
      .tit{
        font-size: .85rem;
        color: #a50319;
        line-height: 1;
        margin: 1rem 0;
        text-align: center;
      }
      .tip{
        line-height: 1;
        margin: .4rem 0;
        font-size: 12px;
        text-align: center;
      }
      .entry-box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.9rem 0;
        flex-direction: column;
        width: 7.61rem;
        height: 9.68rem;
        margin: 0 auto;
        background-size: 100% 100%;
        background-image: url("./../img/homebd.png");
        a{
          display: block;
          width: 5.41rem;
          height: 1.19rem;
          text-align: center;
          background-size: 100% 100%;
          line-height: 1.1rem;
          color: #fff;
          background-image: url("./../img/btnbg.png");
        }
      }
    }
    @media screen and (orientation: landscape){
      background-size: 100% 100%;
      .home-main{
        position: absolute;
        width: 100%;
        height: 90%;
        top: 5%;
        margin-top: 0;
        left: 0;
        .logo{
          margin: 0 auto;
          width: 3.77rem;
          height: 1rem;
          background-size: 100% 100%;
          background-image: url("./../img/logo.png");
        }
        .tit{
          font-size: .35rem;
          color: #a50319;
          line-height: 1;
          margin: .3rem 0;
          text-align: center;
        }
        .tip{
          line-height: 1;
          margin: .4rem 0;
          font-size: 12px;
          text-align: center;
        }
        .entry-box{
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: .6rem 0;
          width: 5rem;
          height: 4rem;
          margin: 0 auto;
          background-size: 100% 100%;
          background-image: url("./../img/homebd.png");
          a{
            display: block;
            width: 4rem;
            height: .7rem;
            text-align: center;
            background-size: 100% 100%;
            line-height: .7rem;
            color: #fff;
            background-image: url("./../img/btnbg.png");
          }
        }
      }
    }
  }
}
